@extends('Admin.layout.layout')
@section('content')
    <div id="container" class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>商铺标识</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <a class="btn btn-sm btn-primary "  data-toggle="modal" data-target="#addModal">新增</a>
                            </div>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                            <thead>
                                <tr>
                                    <th width="15">
                                        <input type="checkbox" class="checkall" name="selectall" />
                                    </th>
                                    <th>ID</th>
                                    <th>标识名称</th>
                                    <th>ICO</th>
                                    <th>说明</th>
                                    <th class="center">状态</th>
                                    <th class="center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            @if(count($list)>0)
                                @foreach($list  as $key => $obj)
                                    <tr>
                                        <th>
                                            <input type="checkbox" class="checkall" name="checkBox" />
                                        </th>
                                        <td>{{$obj['id']}}</td>
                                        <td class="type_{{$obj['id']}}">{{$obj['tp_name']}}</td>
                                        <td><img class="icon_{{$obj['id']}}" src="{{asset('img/user.png')}}"></td>
                                        <td class="desc_{{$obj['id']}}">{{$obj['tp_desc']}}</td>
                                        <td class="center status_{{$obj['id']}}" data-status="{{$obj['tp_status']}}">@if($obj['tp_status'] == 1)正常@else禁用@endif</td>
                                        <td class="center">
                                            <a class="btn-xs btn-primary " data-toggle="modal" data-target="#editModal" data-id="{{$obj['id']}}">编辑</a>
                                            <a class="btn-xs btn-primary btnDel" data-toggle="modal" data-id="{{$obj['id']}}">删除</a>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr class="no-records-found center"><td colspan="8">没有找到匹配的记录</td></tr>
                            @endif
                            </tbody>
                        </table>
                        <div class="row">
                            @include('Admin.common.paginate', ['page' => $page])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        商铺标识
                    </h4>
                </div>
                <form class="form-horizontal m-t" id="addForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">名称：</label>
                            <div class="col-sm-8">
                                <input id="tp_name" name="tp_name" class="form-control" type="text" placeholder="文字标识">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">ICO：</label>
                            <div class="col-sm-8">
                                <img id="labelimg" src="{{asset('img/p1.jpg')}}">
                                <div class="btn-group">
                                    <label title="上传图片" for="inputImage" class="btn btn-primary">
                                        <input type="file" accept="image/*" name="" id="inputImage" class="hide"> 上传图片
                                        <input type="hidden"  name="tp_ico" id="tp_ico"  >
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">说明：</label>
                            <div class="col-sm-8">
                                <input id="tp_desc" name="tp_desc" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">审核：</label>
                            <div class="col-sm-8">
                                <select class="tp_status form-control" id="tp_status" name="tp_status">
                                    <option value="1">正常</option>
                                    <option value="0">暂停</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="btn_submit">
                            确定
                        </button>
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal" >取消
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        商铺标识
                    </h4>
                </div>
                <form class="form-horizontal m-t" id="editForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称：</label>
                        <div class="col-sm-8">
                            <input id="edit_tp_name" name="tp_name" class="form-control" type="text" placeholder="文字标识">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">ICO：</label>
                        <div class="col-sm-8">
                            <img id="editLabelimg" src="{{asset('img/p1.jpg')}}">
                            <div class="btn-group">
                                <label title="上传图片" for="editInputImage" class="btn btn-primary">
                                    <input type="file" accept="image/*" name="" id="editInputImage" class="hide"> 上传图片
                                    <input type="hidden"  name="tp_ico" id="edit_tp_ico"  >
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">说明：</label>
                        <div class="col-sm-8">
                            <input id="edit_tp_desc" name="tp_desc" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">审核：</label>
                        <div class="col-sm-8">
                            <select class="tp_status form-control" id="edit_tp_status" name="tp_status">
                                <option value="1">正常</option>
                                <option value="0">暂停</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btn_submit">
                        确定
                    </button>
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" >取消
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
    <script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>
    <script src="{{asset('js/plugins/chosen/chosen.jquery.js')}}"></script>

    <script>
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            errorClass: "help-block m-b-none",
            validClass: "help-block m-b-none"


        });
        $(document).ready(function () {
            $("#tp_name").val("");
            $("#tp_ico").val("");
            $("#tp_desc").val("");
            $("#tp_status").val(1);

            //新增上传图片
            function upload(file,id){
                var reader = new FileReader();
                //创建文件读取相关的变量
                var imgFile;
                //为文件读取成功设置事件
                reader.onload=function(e) {
                    imgFile = e.target.result;
                    $("#"+id).attr('src', imgFile);
                };
                //正式读取文件
                reader.readAsDataURL(file);
            }

            $('#inputImage').change(function(img){
                console.log(this.files);
                upload(this.files[0],"labelimg");
                var files =  this.files[0];
                var formFile = new FormData();
                formFile.append("image", files);
                $.ajax({
                    url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $("#tp_ico").val(data.path);
                    },
                    error: function(data) {
                        console.log("error");
                    }
                });
            })

            $('#editInputImage').change(function(img){
                upload(this.files[0],"editLabelimg");
                var files =  this.files[0];
                var formFile = new FormData();
                formFile.append("image", files);
                $.ajax({
                    url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $("#edit_tp_ico").val(data.path);
                    },
                    error: function(data) {
                        console.log("error");
                    }
                });
            })

            var edit_id = 0;//修改列表的id
            //点击编辑
            $('#editModal').on('show.bs.modal', function (e) {
                edit_id = $(e.relatedTarget).attr("data-id");//编辑时属性的id
                if(edit_id){
                    $("#edit_tp_name").val($(".type_"+edit_id).text());
                    $("#editLabelimg").attr("src",$(".icon_"+edit_id).attr("src"));
                    $("#edit_tp_ico").val($(".icon_"+edit_id).attr("src"));
                    $("#edit_tp_desc").val($(".desc_"+edit_id).text());
                    $("#edit_tp_status").val($(".status_"+edit_id).attr("data-status"));
                }else{

                }
            })

            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";
            $("#addForm").validate({
                rules: {
                    tp_name: "required",
                    tp_ico: "required",
                    tp_desc: "required"
                },
                messages: {
                    tp_name: icon + "请输入商铺类型名称",
                    tp_ico: icon + "请选择图片标识",
                    tp_desc: icon + "请输入说明"
                },
                submitHandler:function(form){
                    var name   = $("#tp_name").val();
                    var ico    = $("#tp_ico").val();
                    var desc   = $("#tp_desc").val();
                    var state  = $("#tp_status").val();
                    $.ajax({
                        url : '{{Request::url()}}/add',
                        type : 'post',
                        dataType : "json",
                        data : {tp_name:name,tp_ico:ico,tp_desc:desc,tp_status:state},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert("添加成功", {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });

            $("#editForm").validate({
                rules: {
                    tp_name: "required",
                    tp_ico: "required",
                    tp_desc: "required"
                },
                messages: {
                    tp_name: icon + "请输入商铺类型名称",
                    tp_ico: icon + "请选择图片标识",
                    tp_desc: icon + "请输入说明"
                },
                submitHandler:function(form){
                    var name   = $("#edit_tp_name").val();
                    var ico    = $("#edit_tp_ico").val();
                    var desc   = $("#edit_tp_desc").val();
                    var state  = $("#edit_tp_status").val();
                    $.ajax({
                        url : '{{Request::url()}}/'+edit_id+"/edit",
                        type : 'put',
                        dataType : "json",
                        data : {tp_name:name,tp_ico:ico,tp_desc:desc,tp_status:state},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert("修改成功", {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });

            $('.btnDel').click(function(){
                var id = $(this).attr('data-id');
                layer.confirm('是否删除？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function (index) {
                    $.ajax({
                        url: '{{Request::url()}}/'+id+"/delete",
                        type: 'delete',
                        dataType: 'json',
                        data: {'id': id},
                        success: function (data) {
                            if (0 == data.code) {
                                layer.alert("删除成功", {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }, function (index, layero) {
                    layer.close(index);
                });
            })

          /*  $('#btn_submit').click(function () {
                if(!$('#picture').attr('data-rh-score')){
                    setTimeout(function(){
                        $('#picture').parent().addClass('has-error').removeClass('has-success');
                        $('#picture .help-block').show().html('<i class="fa fa-times-circle"></i> 请选择成长值范围');
                    }, 100);
                }
            })*/


        });
    </script>
@endsection
